<div id="systemActivitiIndex">
    <form lay-filter="systemActivitiIndexForm" class="layui-form layui-form-pane" action="">
    <div class="layui-input-block">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 130px">成本报告单据号</label>
                <div class="layui-input-inline">
                    <input name="businessKey" class="layui-input" type="tel">
                </div>
            </div>
        <div class="layui-inline">
            <label class="layui-form-label">发起人</label>
            <div class="layui-input-inline">
                <input name="startUserId" class="layui-input" type="tel">
            </div>
        </div>
        <div class="layui-inline">
        <label class="layui-form-label">开始日期&nbsp;<</label>
        </div>
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
           <input type="text" class="layui-input" name="startTime" id="systemActivitiIndexFormInputStartTime">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">流程是否结束</label>
            <div class="layui-input-block">
                <select name="endActId" lay-verify="required">
                    <option value="no">否</option>
                    <option value="ok">是</option>
                    <option value="">全部</option>
                </select>
            </div>
        </div>
        <button class="layui-btn layui-btn-normal" id="systemActivitiIndexFormBtn" lay-filter="systemActivitiIndexFormBtn">查询</button>
    </div>
    </form>
    <table id="systemActivitiIndexTable" lay-filter="systemActivitiIndexTable"></table>
<!--    按钮-->
    <script type="text/html" id="systemActivitiIndexTableToor">
        <a class="layui-btn layui-btn-xs" lay-event="detail">流程详情</a>
    </script>
<!--    行内工具栏【完成任务】-->
    <script type="text/html" id="systemActivitiIndexTableActHiTaskinstToor">
<!--   就是要d点表格中的属性     那么奇葩的写法-->
        {{#  if(d.endTime==null){ }}
        <a class="layui-btn layui-btn-xs" lay-event="detail">完成任务</a>
        {{#  } }}

    </script>

    <script th:inline="none">
        layui.use(['form','table','laydate','layer','laytpl'],function () {
            var form=layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var laytpl = layui.laytpl;

            //时间格式化
            laydate.render({
                elem: '#systemActivitiIndexFormInputStartTime' //指定元素
            });

            //查询事件
            $("#systemActivitiIndexFormBtn").click(function () {
                //获取表单区域所有值
                var formData= form.val("systemActivitiIndexForm");
                var data = commonAjax("post",'/system/activiti/queryActHiProcinst',formData);
                systemActivitiIndexTableInit(table,data);
                return false;
            })

            //监听systemActivitiIndexTable的工具条事件
            table.on('tool(systemActivitiIndexTable)', function(obj){

                layer.open({
                    type: 1,
                    title: ['流程动向', 'font-size:18px;'],
                    content: '<table id="systemActivitiIndexTableActHiTaskinst" lay-filter="systemActivitiIndexTableActHiTaskinst"></table>', //这里content是一个普通的String
                    area: ['1100px', '500px'],
                    btn: ['流程设置','结束流程'],
                        yes: function(index, layero){
                            //1、弹出页面内容窗口
                                layer.open({
                                    title:"流程设置",
                                    area:["1100px","680px"],
                                    type:2,
                                    content:"/system/activiti/index-contentSetting.html?processInstanceId="+obj.data.processInstanceId,
                                    })


                        },
                        btn2: function(index, layero){
                            var msg=  commonAjax("post","/system/activiti/deleteProcess",{"procInstId":obj.data.processInstanceId,"cause":"滞留时间已超过2个月，管理员操作关闭流程释放数据库压力"})
                            if(msg.status==200){
                                layer.closeAll();
                                layer.msg(msg.msg,{icon: 1})
                                //主动触发点击事件
                                $('#systemActivitiIndexFormBtn').click();
                            } else {
                                layer.msg(msg.msg,{icon: 6})
                            }
                        },
                    success: function(index, layero){ //窗口打开后触发
                        //根据实例id 获取当前实例任务执行情况
                        var atkData = commonAjax("post","/system/activiti/queryActHiTaskinst",{'procInstId':obj.data.id});
                        systemActivitiIndexTableActHiTaskinstInit(table,atkData);

                    }
                });
            })
            //监听任务表格的工具栏按钮：完成任务
            table.on('tool(systemActivitiIndexTableActHiTaskinst)',function (obj) {
                var resultMsg = commonAjax("post","/system/activiti/completeTheTaskDirectly",{'taskId':obj.data.id});
                if(resultMsg.status==200){
                    layer.closeAll();
                    layer.msg(resultMsg.msg,{icon: 1})

                    //主动触发点击事件
                    $('#systemActivitiIndexFormBtn').click();
                } else {
                    layer.msg(resultMsg.msg,{icon: 6})
                }
            })
            form.render();
        })

        //初始化表格
        function systemActivitiIndexTableInit(table,data) {
            table.render({
                id:'systemActivitiIndexTableId',
                elem:'#systemActivitiIndexTable',
                height:costsystemFblH,
                data:data,
                page:true,
                limit:20,
                limits:[20,50,100,500,1000],
                toolbar:true,
                cols:[[
                    {field: 'id', title: '主键id', width:100, sort: true,hide:true},
                    {field: 'processInstanceId', title: '实例', width:80, sort: true,align:'center'},
                    {field: 'businessKey', title: '业务标识', width:150, sort: true,align:'center'},
                    {field: 'startUserId', title: '发起人', width: 180,align:'center'},
                    {field: 'processDefinitionVersion', title: '流程版本', width:110, sort: true,align:'center'},
                    {field: 'processDefinitionName', title: '流程性质', width:150,align:'center'},
                    {field: 'startTime', title: '开始时间', width:200,sort: true,align:'center'}
                    ,{field: 'endTime', title: '结束时间', width:200,sort: true,align:'center'}
                    ,{field: 'durationInMillis', title: '花费时间(毫秒)', width: 150, sort: true,align:'center',hide:true}
                    ,{field: 'deleteReason', title: '异常结束原因', width: 420, sort: true,align:'center'}
                    ,{fixed: 'right', width:100, align:'center', toolbar: '#systemActivitiIndexTableToor'}
                ]]
            })
        }

        function systemActivitiIndexTableActHiTaskinstInit(table,data) {
            table.render({
                id: 'systemActivitiIndexTableActHiTaskinstId',
                elem:'#systemActivitiIndexTableActHiTaskinst',
                height:350,
                data:data,
                defaultToolbar:[],
                cols:[[
                    {field: 'id', title: '任务ID', width:100, sort: true, fixed: 'center'}
                    // ,{field: 'TASK_DEF_KEY_', title: '流程节点id', width:120}
                    // ,{field: 'PROC_INST_ID_', title: '流程实例id', width:100}
                    ,{field: 'name', title: '流程节点名称', width: 130}
                    ,{field: 'description', title: '流程节点描述', width: 180}
                    ,{field: 'assignee', title: '负责人', width: 100}
                    ,{field: 'startTime', title: '开始时间', width: 170, sort: true}
                    // ,{field: 'CLAIM_TIME_', title: '规定时间', width: 150, sort: true}
                    ,{field: 'endTime', title: '结束时间', width: 170, sort: true}
                    ,{field: 'durationInMillis', title: '完成任务(秒)', width: 130, sort: true,templet:function (d) {
                        var durationInMillis = d.durationInMillis;
                            if (durationInMillis){
                                return parseInt(durationInMillis)/1000
                            }else {
                                return '';
                            }
                        //判断行工具条是否显示【完成任务】

                        }}
                    ,{fixed: 'right', width:100, align:'center', toolbar: '#systemActivitiIndexTableActHiTaskinstToor'}
                    // ,{field: 'DELETE_REASON_', title: '流程删除原因', width: 55, sort: true}
                    // ,{field: 'PRIORITY_', title: '优先权', width: 55, sort: true}
                    // ,{field: 'DUE_DATE_', title: '到期日', width: 55, sort: true}
                    // ,{field: 'CATEGORY_', title: '种类', width: 55, sort: true}
                ]]
            })
        }


    </script>

</div>